<template>
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>

      <a-dropdown v-if="checkedKeys.length > 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="batchHandleDelete">
              <Icon icon="ant-design:delete-outlined" />
              删除
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>批量操作
          <Icon icon="ant-design:down-outlined" />
        </a-button>
      </a-dropdown>
    </template>

    <template #publicStore="{ record }">
      <span class="mr-2">{{ record.tenantIds.length }}</span>
      <Icon 
        style="cursor: pointer;" 
        v-if="record.tenantIds.length > 0" 
        icon="simple-line-icons:eye" 
        size="15" 
        @click="handleShowPublishStore(record)"
      />
    </template>

    <template #logo="{ record }">
      <ImagePreview :image-list="[{src: record.logo, width: 60}]"/>
    </template>
  </BasicTable>
  <GoodsDrawer @register="registerDrawer" @success="handleSuccess" :showFooter="showFooter" />
  <GoodsPublishStore @register="registerGoodsPublishStore" @success="handleSuccess" />
</template>
<script lang="ts" name="shop-goods-category" setup>
import {ref} from 'vue';
import {Icon} from '/@/components/Icon';
import {ImagePreview} from '/@/components/Preview/index';
import {BasicColumn, BasicTable, useTable} from '/@/components/Table';
import {useDrawer} from '/@/components/Drawer';
import {useModal} from '/@/components/Modal';
import GoodsDrawer from './GoodsDrawer.vue';
import GoodsPublishStore from './GoodsPublishStore.vue';
import {columns, searchFormSchema} from './goods.data';
import {batchAddIntoCurrentStore, batchdeleteGoods, deleteGoods, list} from './goods.api';
import {useRouter} from "vue-router"
import {useMessage} from '/@/hooks/web/useMessage';
import {useUserStore} from '/@/store/modules/user';

const { createMessage } = useMessage();
const router = useRouter()
const userStore = useUserStore()
const checkedKeys = ref<Array<string | number>>([]);
const showFooter = ref(true);
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerGoodsPublishStore, { openModal: openGoodsPublishStore }] = useModal();
const selectTenant = userStore.getSelectTenant

const actionColumn: BasicColumn = {
  width: 150,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: any) => [
    {
      label: '删除',
      color: 'error',
      ifShow: selectTenant.isMainTenant,
      popConfirm: {
        title: `是否确认删除 ${record.name}`,
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      ifShow: selectTenant.isMainTenant,
      onClick: handleEdit.bind(null, record),
    },

    // 非总店时(门店), 展示的操作栏
    {
      label: '添加到本店',
      ifShow: () => !selectTenant.isMainTenant && !record.isAddCurrentStore,
      onClick: handleAddIntoCurrentStore.bind(null, record),
    },
    {
      label: '已添加到本店',
      color: 'success',
      ifShow: () => !selectTenant.isMainTenant && record.isAddCurrentStore,
    },
  ],
  dropDownActions: (record: Recordable) => [
    {
      label: '上架',
      ifShow: selectTenant.isMainTenant,
      // auth: 'sys:area:save',
      onClick: handleOpenGoodsPublishStore.bind(null, record),
    }, 
    // {
    //   label: '编辑',
    //   // auth: 'sys:area:update',
    //   onClick: handleForm.bind(null, true, record),
    // }
  ]
}


const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
  title: '商品规格列表',
  api: list,
  formConfig: {
    baseColProps: { lg: 6, md: 12 },
    wrapperCol: { lg: 24, md: 24 },
    labelWidth: 90,
    schemas: searchFormSchema,
    showResetButton: false,
  },
  clickToRowSelect: false,
  immediate: true,
  columns: columns,
  size: 'small',
  pagination: false,
  striped: true,
  useSearchForm: true,
  showTableSetting: false,
  bordered: false,
  showIndexColumn: false,
  tableSetting: { fullScreen: true },
  actionColumn
})

const rowSelection = {
  type: 'checkbox',
  columnWidth: 30,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange,
};

function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}

function handleOpenGoodsPublishStore(record) {
  openGoodsPublishStore(true, {
    record, isShow: false
  })
}

async function handleAddIntoCurrentStore(record) {
  await batchAddIntoCurrentStore({ goodsIds: [record.id]})
  createMessage.success('添加成功')
  reload()
}

function handleShowPublishStore(record) {
  openGoodsPublishStore(true, {
    record, isShow: true
  })
}

function handleCreate() {
  showFooter.value = true;
  openDrawer(true, {
    isUpdate: false,
  });
}

function handleEdit(record) {
  showFooter.value = true;
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

async function handleDelete(record) {
  await deleteGoods({ id: record.id }, reload);
}

async function batchHandleDelete() {
  await batchdeleteGoods({ ids: checkedKeys.value }, reload);
}

function handleSuccess() {
  reload();
}

</script>
